<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>灯泡</title>
    <script type="text/javascript">
        let status = false;

        function color() {
            let images = document.getElementById("bulbColor");
            let text = document.getElementById("title_1");
            if (status === false) {
                images.setAttribute("src", "./images/redbulb.png")
                text.innerHTML = "灯亮了！"
                text.setAttribute("style", "color:red");
                status = true;
            } else {
                images.setAttribute("src", "./images/blackbulb.png")
                text.innerHTML = "灯灭了！"
                text.setAttribute("style", "color:black");
                status = false;
            }
        }

    </script>
</head>
<body>
<div onclick="color()" style="text-align: center">
    <img src="./images/blackbulb.png" alt="blackBulb" id="bulbColor">
    <h1 id="title_1">灯灭了！</h1>
</div>
</body>
</html>